<!--
 * @Author: YiY
 * @Date: 2024-01-04 17:39:28
<<<<<<<< HEAD:src/views/home/home.vue
 * @LastEditTime: 2024-12-12 09:00:58
========
 * @LastEditTime: 2024-01-06 15:19:35
>>>>>>>> f5aa85b (feat: Conventional routing):src/views/home/index.vue
-->
<template>
  <el-tabs type="border-card" class="demo-tabs" v-model:model-value="activeName">
    <el-tab-pane v-for="(item, idx) in name" :name="item">
      <template #label>
        <span class="custom-tabs-label">
          <el-icon>
            <MagicStick />
          </el-icon>
          <span>{{ item }}</span>
        </span>
      </template>

      <el-form-item>
        <template #label> originArr: </template> {{ arr }}
      </el-form-item>
      <el-form-item>
        <template #label> Result: </template>
        <el-input v-model="data[idx]" disabled />
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { MagicStick } from '@element-plus/icons-vue'
const name = ['Bubble', 'Selection', 'Insertion', 'Shell', 'Quick', 'Dichotomy']
const arr = [1, 5, 252, 34, 52, 4, 29, 635, 285]
let data: Array<any> = []
let activeName: string


/**
/**
 * @description: Bubble
 * @description: i 0 -> 9
 * @description: j 1 -> 9
 * @return {*}
 */
let bubArr = (arr: Array<number>): Array<number> => {
  let tmp = 0, list = arr
  for (let i = 0, len = list.length; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (list[i] > list[j]) {
        tmp = list[i]
        list[i] = list[j]
        list[j] = tmp
      }
    }
  }
  return list
}
data.push(bubArr(arr))

/**
 * @description: Select
 * @param {*} arr
 * @return {*}
 */
let selectArr = (arr: Array<number>): Array<number> => {
  let tmp = 0, list = arr
  for (let i = 0, len = list.length; i < len; i++) {
    let k = i
    for (let j = i + 1; j < len; j++) {
      if (list[i] > list[j]) {
        k = j
      }
    }
    tmp = list[i]
    list[i] = list[k]
    list[k] = tmp
  }
  return list
}
data.push(selectArr(arr))

/**
 * @description: Insertion
 * @param {*} arr
 * @return {*}
 */
let Insertion = (arr: Array<number>): Array<number> => {
  let tmp = 0, list: Array<number> = Object.assign([], arr)
  for (let i = 0, len = list.length; i < len; i++) {
    for (let j = i + 1; j >= 0; j--) {
      if (list[j] < list[i]) {
        tmp = list[i]
        list[i] = list[j]
        list[j] = tmp
      }
    }
  }
  return list
}
data.push(Insertion(arr))

activeName = name[data.length - 1]
console.log('activeName :>> ', activeName);

</script>

<style scoped lang="scss">
.demo-tabs {
  :deep(.el-tabs__content) {

    padding: 18px;
    color: #6b778c;
    font-size: 18px;
    font-weight: 600;
  }

  .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
  }
}

:deep(.el-form-item__label) {
  width: 100px;
  text-align: left;
}
</style>
